<template>
	<div class="">
		<Row>
            <i-col span="24">
                <user-bar></user-bar>
            </i-col>
		</Row>
		<br/>
		<Row  type="flex"  justify="center">
			<i-col span="23">
                <div>
                	<h3>自然不良信息查询</h3>
                	<i-form :model='formItem'>
                		<Row>
        					<i-col span="12">
	        					<Form-item v-for='infor in formItem.name'  track-by="$index" label="姓名"  :label-width="80">
						            <i-input :value.sync="infor" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
						    <i-col span="12">
	        					<Form-item v-for='infor in formItem.ID'  track-by="$index" label="身份证号码"  :label-width="80">
						            <i-input :value.sync="infor" placeholder="请输入"></i-input>
						        </Form-item>
						    </i-col>
        				</Row>
        				<Form-item>
						    <i-button @click='request' type="primary">查询</i-button>
						    <i-button @click='addItem' type="primary">添加</i-button>
						    <i-button @click='showUp' type="primary">EXCEL导入查询</i-button>
						    
						</Form-item>
                	</i-form>
                </div>
                <div>
                	<input name='file' type='file' id='excel'/>
                	<span @click='upload'>点击上传</span>
                </div>
                <div>
                	<i-table :columns="columns1" :data="results"></i-table>
                </div>
            </i-col>
		</Row>
	</div>
</template>
<script>
	import userBar from '../finance/userBar.vue';
	export default {
		components:{userBar},
		data(){
			return {
				formItem:{
					name:['',
					],
					ID:['',]
				},
				showUpLoad:false,
				results:[],
				columns1:[
					{
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '身份证号',
                        key: 'idCard'
                    },
                    {
                        title: '比中前科',
                        key: 'comparisonResult'
                    },
                    {
                        title: '身份是否匹配',
                        key: 'isMatch'
                    },
                    {
                        title: '案发时间倒序排列',
                        key: 'caseTime'
                    },
				]

			}
		},
		methods:{
			addItem(){
				this.formItem.name.push('');
				this.formItem.ID.push('');
			},
			request(){
				console.log(this.formItem.name.toString())
				console.log(this.formItem.ID.toString())
				this.$http.jsonp(this.path+'product/productServlet/findBadInform',{
                    params:{userNameList:this.formItem.name.toString(),idCardList:this.formItem.ID.toString()},
                    jsonp:'callback'
                 }).then(
                    (datas)=>{
                        console.log(datas);
                        if(datas.body.code=='001'){
                            this.results=datas.body.result.rows;
                        }else{
                            this.$Message.success(datas.body.msg);
                            if(datas.body.code=='997'||datas.body.code=='998'){
                            	this.myRouter.go({path:'/login'});
                            }
                        }
                    },
                    (error)=>{
                        this.$Message.success('网络问题!');
                    }
                 );
			},
			upload(){
				let files=document.querySelector('#excel').files[0];
				let myForm = new FormData()
				myForm.append("file",files);
				this.$http.post(this.path+'product/productServlet/badInformExcelImport',myForm).then((response)=>{
					this.results=response.body.result.rows;
					console.log(response);
				},(error)=>{
					alert('上传失败,请重试!');
				});

			},
			showUp(){
				this.$http.get('http://localhost/a/test').then(
                    (datas)=>{
                    	alert(datas.body);
                    },
                    (error)=>{});

			},
		}
	}
</script>
<style type="text/css">
	
</style>